<template>
 <div id='Article'>
	<Row>
		<Col :xl='3' :lg='3' :md='2' :sm='1' :xs='0'>
			<div class="blank">
				空白
			</div>
		</Col>
		<Col :xl='13' :lg='13' :md='14' :sm='12' :xs='24'>
			<div class="article">
				<div class="category">
					<Icon type='ios-bkkomarks-outline' />文章列表
					<span>共{{16}}篇</span>
				</div>
				<div class="card">
					<Card 
						@changeLike='changeLike'
						v-for='(item,index) in lists'
						:title='item.title'
						:time='item.time'
						:lable='item.lable'
						:category='item.article_category'
						:content='item.article_brief'
						:visitNum='item.visitNum'
						:like='item.like_star'
						:id='item.id'
						:article_id='item.article_id'
						:reviewNum='item.reviewNum'
						:key='index'
					/>
				</div>
			</div>
			
		</Col>
		<Col :xl='5' :lg='5' :md='8' :sm='10' :xs='0'>
			<div class="right-menu">
				
			</div>
		</Col>
	</Row>
 </div>
</template>

<script>
	import Card from './Card.vue'
export default {
  name: 'Article',
  data() {
      return {
		lists:[
			{
				id:123,
				title:'传入标题测试',
				time:'2020-07-07',
				lable:'这是lable',
				article_brief:'这是文章简介',
				article_category:'文章大标签',
				visitNum:19,
				like_star:20,
				reviewNum:30,
				article_id:"9999",
			},{
				id:123,
				title:'传入标题测试',
				time:'2020-07-07',
				lable:'这是lable',
				article_brief:'这是文章简介',
				article_category:'文章大标签',
				visitNum:19,
				like_star:20,
				reviewNum:30,
				article_id:"9999",
			},
		]
      };
  },
  components:{
    Card
  },
  mounted() {
    
  },
  methods:{
    changeLike(id){
		
	}
  },
  computed: {
    
  }
}
</script>

<style lang="less" scoped>
	#Article{
		margin-top: 3vw;
		background: url(../assets/img/light.jpg) 50%;
		.blank{
			width: 100%;
			height: 100%;
			border: 1px solid red;
		}
		.article{
			width: 100%;
			height: 100%;
			// border: 1px solid blue;
			background: #fff;
			border-radius: 0.3125rem;
			.category{
				font-size: 2rem;
				letter-spacing: 0.3125rem;
				text-align: center;
				line-height: 2rem;
				span{
					font-size: 1rem;
					float: right;
					
				}
			}
		}
		.right-menu{
			width: 100%;
			height: 100%;
			border: 1px solid green;
		}
	}
</style>
